<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机号登录</title>
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>

        .toast-center-center {
            left: 50%;
            top: 40%;
            transform: translate(-50%,-50%);
        }

        .logo_head {
            color: #e6e6e6;
            font-size: 100px;
            font-weight: 800;
            letter-spacing: -10px;
            margin-bottom: 0px;
            height: 350px;
        }

        .logo_foot {
            color: #e6e6e6;
            font-size: 100px;
            font-weight: 800;
            letter-spacing: -10px;
            margin-bottom: 0px;
            height: 550px;
        }

    </style>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>
            <h1 class="logo_head">外汇</h1>
        </div>
        <h3>手机号登录</h3>
        <form class="m-t" role="form">

            <div class="form-group">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="手机号码" id="phone" aria-describedby="basic-addon1">
                </div>
                <div class="form-group" style="width: 174px;float: left">
                    <input type="text" class="form-control" placeholder="验证码" required="required" id="key">
                </div>
                <div class="form-group" style="float: right">
                    <input type="button" style="width: 120px;float: left" class="btn btn-info" id="getKey" value="获取验证码">
                </div>
            </div>
            <button type="button" class="btn btn-primary block full-width m-b" id="key-submit">提交</button>
        </form>
        <div>
            <h1 class="logo_foot">交易</h1>
        </div>
    </div>
</div>
<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(function() {
        var wait =60;
        toastr.options = {
            "closeButton": true,// 是否显示关闭按钮
            "positionClass": "toast-center-center",// 弹出窗的位置
            "showDuration": "1000",// 显示的动画时间
            "hideDuration": "1000",// 消失的动画时间
            "timeOut": "1500",// 弹窗展现时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut", //消失时的动画方式
            "allowHtml":true,// 允许弹窗内容包含 HTML 语言
        };

        function time(o) {
            if (wait === 0) {
                o.removeAttribute("disabled");
                o.value = "获取验证码";
                wait = 60;
            }else {
                o.setAttribute("disabled",true);
                o.value = "重新发送(" + wait + "s)";
                wait--;
                setTimeout(function() {
                    time(o);
                },1000)
            }
        }
        $("#getKey").click(function() {
            if ($("#phone").val() == "" ) {
                toastr.warning('请输入手机号！');
                return;
            }

            validatePhone();
            time(this);
            $.ajax({
                url : "/message/send",
                type : "post",
                data : {
                    phone: $("#phone").val(),
                },
                dataType : "json",
                success : function(data) {
                    if (data.state === 200){
                        toastr.success('验证码已发送到您的手机.');
                    }else {
                        toastr.error(data.data);
                    }
                }
            })
        });

        function validatePhone(){
            var phone = $("#phone").val();
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
                toastr.error("手机号码有误，请重填");
                return false;
            }
        }

        $("#key-submit").click(function() {
            if ($("#key").val() === "" || $("#phone").val() === ""){
                toastr.warning('请输入相关信息！');
                return;
            }

            $.ajax({
                url : "/user/SMSLogin",
                type : "post",
                data : {
                    phone : $("#phone").val(),
                    key : $("#key").val(),
                },
                dataType : "json",
                success : function(data) {
                    if (data.state === 200){
                        window.sessionStorage.setItem("userName", data.data[0]);
                        window.sessionStorage.setItem("href", data.data[1]);
                        window.sessionStorage.setItem("roleId", data.data[2]);
                        location.href = "/index";
                    }else {
                        toastr.error(data.data[0]);
                        $("#key").val("");
                    }
                }
            })
        })
    })
</script>
</body>
</html>
